<template>
	<view class="popup-coupon-content" :class="useInPage ? 'page' : ''">
		<view class="input">
			<input class="popup-content-input" v-model="code" placeholder="请输入优惠码" />
			<view class="text" @click="handleConvert" :class="code ? 'hasValue' : ''">
				兑换
			</view>
		</view>
		<view class="tab">
			<view class="tab-item" @click="handleClickSelectType('可用')" :class="selecType == '可用' ? 'active' : ''">
				<view class="tab-text">
					可用({{ couponList.length }})
				</view>
			</view>
			<view class="tab-item" @click="handleClickSelectType('不可用')" :class="selecType == '不可用' ? 'active' : ''">
				<view class="tab-text">
					不可用({{ onCouponList.length }})
				</view>
			</view>
		</view>
		<view class="coupon-list">
			<view class="padding">
				<view class="" v-if="selecType == '可用'">
					<view class="coupon_title" v-if="coupon_title_sts" style="padding-bottom: 20rpx;">
						您选择的优惠劵，可抵用 <text style="font-size: 28rpx;color: #FF6411;">￥{{ state.useCoupon }}</text>
					</view>
					<view class='head' v-if="couponList.length > 0" @click="handClickCoupon(item1)"
						v-for="(item1, index) in couponList" :key="index">

						<view class="coupon_item">
							<view class="item_top">
								<view class="item_top_left">
									<view class="item_info">
										￥<text style="font-size: 60rpx;padding: 0 10rpx;">{{ item1.bt_amount }}</text>
										<text style="font-size: 32rpx;">{{ item1.back_demo }}</text>
									</view>
									<view class="item_date" style="display: flex;">
										有效期：{{ item1.end_date }}
									</view>
								</view>
							</view>
							<view class="item_bottom">
								<view class="left">{{ item1.btfhgz }}</view>
								<view class="right">剩余:{{ item1.sybt }}</view>
							</view>
						</view>
						<view class="mock">
							<nut-checkbox text-position="left" v-model="item1.checkbox"></nut-checkbox>
						</view>
					</view>
					<PinappEmpty v-else></PinappEmpty>
				</view>
				<view class="" v-if="selecType == '不可用'">
					<view class='head2' v-if="onCouponList.length > 0" v-for="(item1, index) in onCouponList" :key="index">
						<view class="">
							<view class="coupon_item">
								<view class="item_top">
									<view class="item_top_left">
										<view class="item_info">
											￥<text style="font-size: 60rpx;padding: 0 10rpx;">{{ item1.bt_amount }}</text>
											<text style="font-size: 32rpx;">{{ item1.back_demo }}</text>
										</view>
										<view class="item_date" style="display: flex;">
											有效期：{{ item1.end_date }}
										</view>
									</view>
									<!-- <view class="item_top_right">
										<text>立即领取</text>
									</view> -->
								</view>
								<view class="item_bottom">
									<view class="left">{{ item1.btfhgz }}</view>
									<view class="right">剩余:{{ item1.sybt }}</view>
								</view>
							</view>
						</view>
					</view>
					<PinappEmpty v-else></PinappEmpty>
				</view>
			</view>
		</view>
		<view v-if="showClose" class="button-cancel" @click="handleClose">
			使用
		</view>
	</view>
</template>

<script setup>
import PinappEmpty from './pinapp-empty.vue'
import { ref, computed } from 'vue'
import {
	onShow,
	onLoad
} from '@dcloudio/uni-app'
import {
	Proname
} from '../../api/api'
const selecType = ref('可用')
const showEmpty = ref(false)
const code = ref('')
const useNum = ref({ available: 0, otavailable: 0 })
const state = ref({
	useCoupon: 0,
	session: ''
})
const coupon_title_sts = computed(() => {
	let sts = false
	props.couponList.forEach((item, index) => {
		console.log(item);
		if (item.checkbox == false) {
			sts = false
		} else {
			sts = true
		}
	})
	return sts
})
const props = defineProps({
	// 是否展示【不使用】按钮，浮层时候使用
	showClose: {
		type: Boolean,
		default: true
	},
	// 页面中使用传true，浮层使用传false
	useInPage: {
		type: Boolean,
		default: false
	},
	// 优惠劵类型
	defaultSelectType: {
		type: String,
		default: ''
	},
	// 可用优惠劵
	couponList: {
		type: Array,
		default: ''
	},
	// 不可用优惠劵
	onCouponList: {
		type: Array,
		default: ''
	},
})

const onNewCouponList = ref([])
onLoad(async () => {
	if (props.defaultSelectType) selecType.value = props.defaultSelectType;
})
/**
 * 点击兑换
 */
const emit = defineEmits(['handleConvert', 'handleSelectType', 'handClickCoupon', 'handleClose'])
const handleConvert = () => {
	if (code.value) {
		emit('handleConvert', code.value)
	}
}
/**
 * 切换优惠券类别
 */
const handleClickSelectType = (type) => {
	if (selecType.value !== type) {
		selecType.value = type
		let a = selecType.value == '可用' ? 'available' : 'notavailable'
		showEmpty.value = useNum.value[a] ? false : true
		emit('handleSelectType', type)
	}
}
const handClickCoupon = (val) => {
	state.value.session = uni.getStorageSync('session')
	props.couponList.forEach(element => {
		element.checkbox = false
	})
	props.couponList.forEach(element => {
		if (element.bt_code == val.bt_code) {
			element.checkbox = true
		}
	})
	Proname({
		proname: "JJ0287",
		back_code: "XS" + state.value.session.DWDM,
		agent_code: state.value.session.DWDM,
		bt_code: val.bt_code
	}).then(res => {
		state.value.useCoupon = res.rows[0].bt_amount
	})
}
/**
 * 关闭优惠券：浮层时候使用
 */
const handleClose = () => {
	let item = props.couponList.filter(item => item.checkbox == true)
	let obj = {
		...item[0],
		useCoupon: state.value.useCoupon
	}
	emit('handClickCoupon', obj)
}
</script>

<style lang="scss" scoped>
@import '../coupon-card-list/coupon-card-list.scss';
</style>
